<template>
  <div class="notice_detail">
    <!-- 标题 -->
    <el-input v-model="result.title" disabled class="input-field">
      <template #prepend>标&emsp;&emsp;题：</template>
    </el-input>
    <!-- 发送时间 -->
    <el-input v-model="result.noticeTime" disabled class="input-field">
      <template #prepend>发送时间：</template>
    </el-input>
    <!-- 发件人 -->
    <el-input v-model="result.senderEmail" disabled class="input-field">
      <template #prepend>发&ensp;件&ensp;人：</template>
    </el-input>
    <!-- 收件人 -->
    <el-input v-model="result.recipientType" disabled class="input-field">
      <template #prepend>收&ensp;件&ensp;人：</template>
    </el-input>
    <!-- 内容 -->
    <el-input
      v-model="result.content"
      readonly
      class="textarea-field"
      :autosize="{ minRows: 8, maxRows: 8 }"
      type="textarea"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { Notification } from "../../../types/notice";

const props = defineProps<{
  result: Notification;
}>();
const result = props.result;
</script>

<style lang="scss" scoped>
.notice_detail {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.input-field {
  margin-bottom: 15px;
}

.textarea-field {
  margin-top: 20px;
}
</style>
